<style lang="scss" scoped>
$left: 30rpx;
$height-banner: 490rpx;

.index {
	min-height: 100vh;
}

.index-banner {
	margin-bottom: 84rpx;
	position: relative;
}

.index-banner-mask-root {
	width: 100wh;
	height: $height-banner;
	position: relative;
	overflow: hidden;
}

.index-banner-mask {
	width: 3040rpx;
	height: 3040rpx;
	border-radius: 3040rpx;
	margin-left: -1520rpx;
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 0;
	overflow: hidden;
}

.index-banner-mask-thumb {
	width: 100vw;
	height: $height-banner;
	background-repeat: no-repeat;
	background-size: 200%;
	background-position: center center;
	filter: blur(20px);
	position: absolute;
	z-index: 2;
	bottom: 0;
	margin-left: -50vw;
	left: 50%;
}

.index-banner-mask-bg {
	width: 100vw;
	height: $height-banner;
	background-color: rgba(0, 0, 0, .5);
	position: absolute;
	z-index: 3;
	bottom: 0;
	margin-left: -50vw;
	left: 50%;
}

.index-banner-thumb {
	width: calc(100% - 60rpx);
	height: 330rpx;
	margin: 0 auto;
	display: block;
	position: absolute;
	z-index: 2;
	bottom: -55rpx;
	left: $left;
	border-radius: 20rpx;
}

.adv {
	width: 100%;
	padding: 0 $left;
	box-sizing: border-box;
	margin: 31rpx 0 60rpx 0;
}

.adv image {
	width: 100%;
	display: block;
}

.tab-bar {
	width: 100%;
	padding: 0 $left;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	position: relative;
}

.tab-bar-border {
	width: 17rpx;
	height: 34rpx;
	background: rgba(250, 149, 41, 1);
	border-radius: 3rpx;
}

.tab-bar-item {
	padding: 0 18rpx;
	font-size: 36rpx;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.3);
}

.tab-bar-item-select {
	color: rgba(0, 0, 0, 1);
}

.tab-bar-cut {
	width: 1rpx;
	height: 26rpx;
	background-color: rgba(0, 0, 0, 0.2);
	margin: 0 4rpx;
}

.tab-bar-more {
	position: absolute;
	right: $left;
	font-size: 28rpx;
	font-weight: 500;
	color: rgb(51, 51, 51);
	display: flex;
}

.tab-bar-more-value {
	margin-right: 19rpx;
}

.list-film {
	padding-bottom: 42rpx;
}
</style>

<template>
	<view class="index">
		<view class="index-content">

			<view class="index-banner">
				<view class="index-banner-mask-root">
					<view class="index-banner-mask">
						<view class="index-banner-mask-thumb" :style="{backgroundImage: 'url('+topThumb+')'}">
							<view class="index-banner-mask-bg"></view>
						</view>
					</view>
				</view>

				<image class="index-banner-thumb" :src="topThumb" mode="scaleToFill"></image>
			</view>

			<!-- 已购电影票 -->
			<lately-order
				v-if="latelyOrder"
			></lately-order>
			

			<!-- 附近影院 -->
			<nearby-cinema
				v-if="cinemaNearest && !latelyOrder"
				:name="cinemaNearest.name"
				:address="cinemaNearest.address"
				:distance="cinemaNearest.distance"
				:thumb="cinemaNearestCover"
			></nearby-cinema>

			<!-- 广告位 -->
			<view class="adv">
				<image src="/static/tmp/index-adv.png" mode="widthFix" @click="$navigateTo({url: '/pages/user/equity/index'})"></image>
			</view>

			<!--  中部导航 -->
			<view class="tab-bar">
				<view class="tab-bar-border"></view>

				<button class="tab-bar-item" :class="{'tab-bar-item-select': tabType == 1}" @click="changeTab(1)">正在热映</button>

				<view class="tab-bar-cut"></view>

				<button class="tab-bar-item" :class="{'tab-bar-item-select': tabType == 2}" @click="changeTab(2)">即将上映</button>

				<button class="tab-bar-more" @click="$navigateTo({url: '/pages/index/film_list'})">
					<view class="tab-bar-more-value">全部<text v-text="filmTotal"/>部</view>
					<arrow-right-black class="tab-bar-more-icon"></arrow-right-black>
				</button>
			</view>

			<!-- 正在热映 -->
			<view class="list-film" v-if="1 == tabType">
				<list-item-film
					v-for="(v, k) in lHots"
					:key="k"
					:thumb="v.poster_"
					:name="v.name"
					:performer="v.actors_"
					:site-quantity="v.siteQuantity"
					:play-quantity="v.playQuantity"
					:price="v.price"
				></list-item-film>
			</view>

			<!-- 即将上映 -->
			<view class="list-film" v-if="2 == tabType">
				<list-item-film
					v-for="(v, k) in lFutures"
					:key="k"
					:thumb="v.poster_"
					:name="v.name"
					:performer="v.actors_"
					:site-quantity="v.siteQuantity"
					:play-quantity="v.playQuantity"
					:price="v.price"
					@click-pay="onClickPay(v)"
				></list-item-film>
			</view>

		</view>
	</view>
</template>
<script>
import {getToken} from '@/utils/index.js'
import iconArrow from '../components/icon-arrow';
import iconLocation from '../components/icon-location';
import ArrowRightBlack from "../../components/arrow-right-black";
import ListItemFilm from "./list-item-film";
import NearbyCinema from "./nearby-cinema";
import LatelyOrder from "./lately-order";
import loadsh from "loadsh";

export default {
	components: {
		iconArrow,
		iconLocation,
		ArrowRightBlack,
		ListItemFilm,
		NearbyCinema,
		LatelyOrder,
	},

	data() {
		return {
			// 顶部海报 根据客户需求暂时写死 无后台配置
			topThumb: "http://test.freeterna.com:8080/test/movie/poster/5.png",
			tabType: 1,
			lHots: false,
			lFutures: false,
			latelyOrder: false,
			cinemaNearest: false,
			cinemaNearestCover: false,
		};
	},

	computed: {

		/**
		 * 电影数量统计
		 */
		filmTotal() {
			return (this.lHots.length + this.lFutures.length) || 0;
		},

	},

	onShow() {
		this.getLHots();
		this.getLFutures();
		this.getLatelyOrder();
		this.getCinemaNearest();
	},

	methods: {

		/**
		 * 最近的电影院
		 */
		getCinemaNearest() {
			wx.getLocation({
				type: "gcj02",

				success: (res) => {
					const latitude = res.latitude;
					const longitude = res.longitude;

					this.$request.get({
						url: "/member/index/cinema/nearest",

						data: {
							cityName: "重庆市九龙坡区",
							lat: latitude,
							lgt: longitude,
						},

						success: (res) => {
							const data = res.data.data || false;
							this.cinemaNearest = data;
						},
					});
				}
			});
		},

		/**
		 * 即将播放的订单
		 */
		getLatelyOrder() {
			this.$request.get({
				url: "/member/index/order/lately",

				success: (res) => {
					const data = res.data;
				}
			});
		},

		/**
		 * 正在热映
		 */
		getLHots() {
			this.$request.get({
				url: "member/movie/hots",

				success: (res) => {
					const list = (res.data.data || []).map((v) => {
						v.poster_ = this.$request.toAbs(v.poster);
						v.actors_ = v.actors.split(";").join("、");
						return v;
					});
					this.lHots = list;
					this.getCinemaNearestCover();
				},
			});
		},

		/**
		 * 即将上映
		 */
		getLFutures() {
			this.$request.get({
				url: "member/movie/futures",

				success: (res) => {
					const list = (res.data.data || []).map((v) => {
						v.poster_ = this.$request.toAbs(v.poster);
						v.actors_ = v.actors.split(";").join("、");
						return v;
					});
					this.lFutures = list;
					this.getCinemaNearestCover();
				},
			});
		},

		/**
		 * 附近电影院热点图
		 */
		getCinemaNearestCover() {
			if (false == loadsh.isArray(this.lHots) || false == loadsh.isArray(this.lFutures)) {
				return;
			}
			const list = [].concat(this.lHots).concat(this.lFutures);
			const index = this.$random(0, list.length - 1);
			const item = list[index];
			this.cinemaNearestCover = item.poster;
		},

		/**
		 *购票
		 */
		onClickPay(item) {
			uni.navigateTo({url: "/pages/studios-list/index"});
		},

		btnGOstudios() {
			this.$api.goPage('/pages/studios-list/index');
		},
		btnBuy() {
			this.$api.goPage('/pages/studios-list/index');
		},
		btnGoFilm() {
			this.$api.goPage('/pages/index/film_list');
		},
		changeTab(type) {
			this.tabType = type;
		},
		onClickPurchasedCode() {
			uni.navigateTo({url: "/pages/order/show/index"});
		},
		linkTo(url, auth = false) {
			if (auth && !getToken()) {
				url =  `/pages/login/index?redirect=${url}`
			}
			uni.navigateTo({
				url
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.index-content {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.c-list {
	width: 100%;
	margin: 0 auto 42rpx auto;

	.item {
		height: px2vw(140);
		width: 100%;
		position: relative;
		color: #000;

		.img {
			height: px2vw(95);
			width: px2vw(70);
			border-radius: px2vw(8);
			position: absolute;
			top: px2vw(25);
			left: 0;
			box-shadow: 0px 0rpx 60rpx 0px rgba(0, 0, 0, 0.1);
		}

		.title {
			font-size: 34rpx;
			font-weight: 600;
			position: absolute;
			top: px2vw(25);
			left: px2vw(85);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: px2vw(180);
			display: flex;
			align-items: center;

			.tiptxt {
				width: 34rpx;
				height: 34rpx;
				font-size: 24rpx;
				background-color: #f24244;
				color: #f1f1f1;
				border-radius: px2vw(2);
				vertical-align: middle;
				margin-left: px2vw(6);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.role {
			font-size: px2vw($fz12);
			position: absolute;
			top: px2vw(55);
			left: px2vw(85);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: px2vw(180);
		}

		.price,
		.scene-content,
		.role-content {
			font-size: px2vw($fz12);
			position: absolute;
			top: px2vw(54);
			left: px2vw(85);
			color: #888;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: px2vw(180);
		}

		.scene-content {
			top: px2vw(73);
		}

		.price {
			top: px2vw(100);
			font-size: 46rpx;
			color: #ff5400;
			font-weight: 600;

			.unit {
				font-size: 30rpx;
			}
		}

		.b-line {
			border: px2vw(0.5) solid #eee;
			position: absolute;
			bottom: 0;
			right: 0;
			width: px2vw(275);
		}

		.btn-buy {
			background-color: #f24244;
			height: px2vw(30);
			line-height: px2vw(30);
			width: px2vw(65);
			border-radius: px2vw(25);
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: -px2vw(15);
			text-align: center;
			font-size: px2vw($fz16);
			color: #fff;
			box-shadow: 0px 6rpx 16rpx 0px rgba(210, 56, 58, 0.2);
		}
	}
}
</style>
